/**
 * @description
 * @author zs
 * @date 2018/8/20
 *
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import moment from 'moment';
import { CommonTable } from 'components';
import { repeatLoanAction } from './index';
import SearchList  from './SearchList/SearchList';
import { Popconfirm, Icon } from 'antd';
import DetailModal from './DetailModal/DetailModal';
import styles from './RepeatLoan.less';
import { orderStatus } from 'utils';

const convertParams = (obj) => {
    const { orderNo = '', userTrueName = '', userPhone = '' } = obj;
    return {
        orderNo,
        userTrueName,
        userPhone
    };
}

class RepeatLoan extends Component{
    constructor(props) {
        super(props);
        this.state = {};
        const _this = this;
        this.searchParams = convertParams({});
        this.pageSize = 10;
        this.columns = [
            { title: '订单号', dataIndex: 'orderNo', key: 'orderNo' },
            { title: '姓名', dataIndex: 'userTrueName', key: 'userTrueName' },
            { title: '手机号', dataIndex: 'userPhone', key: 'userPhone' },
            { title: '正常还款金额(元)', dataIndex: 'deviceMoney', key: 'deviceMoney' },
            { title: '申请金额(元)', dataIndex: 'lendMoney', key: 'lendMoney' },
            {
                title: '申请时间',
                dataIndex: 'addTime',
                key: 'addTime',
                render(text) {
                    if(!text) {
                        return '';
                    }
                    return moment(Number(text)* 1000).format('YYYY-MM-DD HH:mm:ss');
                }
            },
            {
                title: '订单状态',
                dataIndex: 'status',
                key: 'status',
                render(text) {
                    return orderStatus[text]
                }
            },
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    return (
                        <div className={styles.btnWrapper}>
                            <span onClick={() =>_this.lookDetail(record)}><Icon type={'file'}/></span>
                            <Popconfirm title={'确认要重新放款吗？'} onConfirm={() => _this.payLoan(record)}>
                            <span><Icon type="pay-circle-o" /></span>
                            </Popconfirm>
                        </div>
                    );
                }
            },
        ];
    }

    lookDetail = (record) => {
        const { orderNo } = record;
        const { changeModalVisible, getModalData } = this.props;
        changeModalVisible(true);
        getModalData({ orderNo });
    }
    payLoan = (record) => {
        const { orderNo } = record;
        const { repeatPay, getTableData } = this.props;
        repeatPay({ orderNo }, () => {
            getTableData({ pageSize: this.pageSize, pageNum: 1, ...this.searchParams });
        });
    }

    handlePageChange = (info) => {
        const { current, pageSize } = info;
        const { getTableData } = this.props;
        getTableData({ pageSize, pageNum: current, ...this.searchParams });
    }

    submit = (obj) => {
        const { getTableData } = this.props;
        const params = convertParams(obj);
        this.searchParams = params;
        getTableData({ pageSize: this.pageSize, pageNum: 1, ...params });
    }

    //modal
    handleModalChange = (info) => {
        const { current, pageSize } = info;
        const { getModalData } = this.props;
        getModalData({ pageSize, pageNum: current });
    }
    afterClose = () => {
        const { setModalData, changeModalLoading } = this.props;
        setModalData({ data: [], pagination: {} });
        changeModalLoading(false);
    }

    handleCancel = () => {
        const { changeModalVisible } = this.props;
        changeModalVisible(false);
    }
    componentDidMount() {

    }
    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({ data: [], pagination: {} });
    }
    render() {
        const { tableData: { data, pagination }, loading, visible, modalLoading, modalData } = this.props;
        return (
            <div>
                <SearchList submit={this.submit}/>
                <CommonTable
                    columns={this.columns}
                    pagination={pagination}
                    dataSource={data}
                    loading={loading}
                    handlePageChange={this.handlePageChange}
                />
                <DetailModal
                    handlePageChange={this.handleModalChange}
                    visible={visible}
                    afterClose={this.afterClose}
                    modalLoading={modalLoading}
                    modalData={modalData}
                    handleCancel={this.handleCancel}
                />
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const { paymentManageState: { repeatLoanState } } = state;
    return {
        tableData: repeatLoanState['tableData'],
        modalData: repeatLoanState['modalData'],
        visible: repeatLoanState['visible'],
        loading: repeatLoanState['loading'],
        modalLoading: repeatLoanState['modalLoading']
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: repeatLoanAction.rplGetTableData,
        setTableData: repeatLoanAction.rplSetTableData,
        getModalData: repeatLoanAction.rplGetModalData,
        setModalData: repeatLoanAction.rplSetModalData,
        changeModalLoading: repeatLoanAction.rplChangeModalLoading,
        changeModalVisible: repeatLoanAction.rplChangeModalVisible,
        repeatPay : repeatLoanAction.rplRepeatPay
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(RepeatLoan)